<template>
  <section class='f-goods-info'>
    <p class="f-center" style="padding:10px;font-size:14px">{{formData.title || '--'}}</p>
    <section class="f-box">
      <p class="f-title">产品套餐</p>
      <div>{{formData.product || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">套餐内容</p>
      <div>{{formData.productInfo || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">优惠详情</p>
      <div>{{formData.yhxx || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">快递方式</p>
      <div>{{formData.kdfs || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">充值链接</p>
      <div>{{formData.czlj || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">办卡年龄</p>
      <div>{{formData.bknl || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">合约期</p>
      <div>{{formData.hyq || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">不发货地区</p>
      <div>{{formData.bfhdq || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">定向范围</p>
      <div>{{formData.dxfw || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">复机及注销方式</p>
      <div>{{formData.fjjzxfs || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">更新时间</p>
      <div>{{ getDateTime(formData.modifyTime)[6]  || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">温馨提示</p>
      <div>{{formData.wxts || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">激活方式</p>
      <div>{{formData.jhfs || '--'}}</div>
    </section>

    <section class="f-box f-mt-10">
      <p class="f-title">激活流程图</p>
      <img style="width:100%" :src="formData.jhlct" alt="">
    </section>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { getDateTime } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: route.query.goodsName,
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: ''
      });

      getGoodsInfo()
    })

    const getGoodsInfo = () => {
      let json = {
        goodsId: route.query.goodsId
      }
      api.goodsInfo(json).then(res => {
        state.formData = res.data
      })
    }

    return {
      ...toRefs(state),
      getDateTime
    }
  }
}
</script>
<style lang='scss' scoped>
.f-goods-info {
  .f-box {
    background: #fff;
    padding: 16px 14px 10px 14px;
  }
  .f-title {
    color: #000000;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .f-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 11px;
    background: #488bfe;
    margin-right: 4px;
  }
}
</style>